<template>
   <el-container style="height: 80vh; border: 1px solid #eee">
    <el-main>
      <div class="user">
        <div class="hm-search">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="goods-tab">
          <div id="myChart"></div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { getReports } from "../../http/api.js";
import * as echarts from 'echarts';
import { onMounted } from 'vue-demi';
export default {
  setup() {
    
    onMounted(async()=>{
      var myChart= echarts.init(document.getElementById("myChart"));
      const res=await getReports()
      myChart.setOption(res)
    })
    return{}
  },
}
</script>
<style scoped lang="scss">

.hm-search {
  height: 70px;
}
.el-main {
  background-color: #eee;
}
.user {
  background-color: #fff;
  padding: 15px;
}
.goods-tab {
  width: 100%;
  padding: 15px;
  border-color: #fff;
}
#myChart {
  width:80%;
  height: 600px;
}
</style>